<template>
  <div style="width: auto;height: 400px" id="main">
  </div>
</template>

<script>

  import {getSignGraphic} from "../../api/sign";

  export default {
    name: "",
    data(){
      return{
        listQuery:{
          courseCode:'',
          classId:''
        },
        option : {
          title: {
            text: '签到情况',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '签到情况',
              type: 'pie',
              radius: '50%',
              data: [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      }
    },
    methods:{
      //初始化echarts
      echartsInit() {
        console.log("echart执行")
        //柱形图
        //因为初始化echarts 的时候，需要指定的容器 id='main'
        console.log(this.option)
        this.$echarts.init(document.getElementById('main')).setOption(this.option)

      },
      //获取列表信息
      getGraphicData(param){
        this.listQuery.courseCode=param.courseCode
        this.listQuery.classId=param.classId
        getSignGraphic(this.listQuery).then(res=>{
          this.option.series[0].data = res.data
          this.echartsInit()
        })
      }
    },
    activated() {
      // this.echartsInit()
    },
    mounted(){
      // 在通过mounted调用即可

      // this.echartsInit()
    },
  }
</script>

<style scoped>

</style>
